<!-- echart 折线图 -->
<template>
  <div :id="echartsData.id" :ref="echartsData.id" class="box" />
</template>

<script>
import echarts from "echarts";
import { mapGetters } from "vuex";
import variables from "@/styles/black/variables.scss";
import bgImg1 from "@/assets/kmerit/homePage/pieBg1.png";
import bgImg2 from "@/assets/kmerit/homePage/pieBg2.png";
export default {
  name: "",
  components: {},
  props: {
    echartsData: {
      type: Object,
      default: () => {
        // data: [],
        // name: '',
        // unit: '万元'
        // id: ''
      },
    },
  },
  data() {
    return {
      echarts1: null,
    };
  },
  computed: {
    // 监听store中数据变化
    ...mapGetters(["isCollapse"]),
    menuIsCollapse() {
      return this.isCollapse;
    },
  },
  watch: {
    menuIsCollapse: {
      handler(newValue, oldValue) {
        this.getData();
      },
      deep: true,
    },
    echartsData: {
      handler: function (newValue, oldValue) {
        this.getData();
      },
      deep: true,
      // immediate: true
    },
  },
  created() {},
  mounted() {
    const ele = document.getElementById(this.echartsData.id);
    let img = null;
    if (this.echartsData.name === "发行规模") {
      img = bgImg1;
    } else if (this.echartsData.name === "发行只数") {
      img = bgImg2;
    } else {
      img = bgImg1;
    }
    ele.style.backgroundImage = `url(${img})`;
    this.getData();
    window.onresize = () => {
      this.getData();
    };
    window.addEventListener("resize", () => {
      this.getData();
    });
  },
  activated() {
    this.getData();
  },
  beforeDestroy() {
    if (this.echarts1) {
      this.echarts1.clear();
    }
  },
  destroyed() {
    if (this.echarts1) {
      this.echarts1.dispose();
    }
  },
  // deactivated() {
  //   console.log("deactivated页面关闭时触发");
  // },
  methods: {
    getData() {
      let color = [];
      if (this.echartsData.name === "发行规模") {
        color = [variables.ecahrtsPieColor1, variables.ecahrtsPieColor2];
      } else if (this.echartsData.name === "发行只数") {
        color = [variables.ecahrtsPieColor3, variables.ecahrtsPieColor4];
      } else {
        color = [variables.ecahrtsPieColor1, variables.ecahrtsPieColor2];
      }
      const _this = this;
      const options = {
        color: color,
        title: {
          text: "单位:(万元)",
          x: "top",
          y: "right",
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 12,
            color: variables.textColor,
          },
        },
        // graphic: {
        //   element: [
        //     {
        //       type: "image",
        //       style: {
        //         image: img,
        //         width: 80,
        //         heihgt: 80,
        //       },
        //       left: "center",
        //       top: "center",
        //     },
        //   ],
        // },
        legend: {
          orient: "vertical",
          right: 10,
          top: "middle",
          itemGap: 10,
          itemWidth: 10,
          itemHeight: 10,
          icon: "circle",
          formatter: (name) => {
            const data = _this.echartsData.data;
            let total = 0;
            let target;
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value;
              if (data[i].name === name) {
                target = data[i].value;
              }
            }
            const arr = [
              "{a|" + name + "}",
              // "{b|" + ((target / total) * 100).toFixed(2) + "%}",
              "{b|" + target + "}",
            ];
            return arr.join("  ");
          },
          textStyle: {
            fontSize: 12,
            color: variables.textColor,
            rich: {
              a: {
                fontSize: 12,
              },
              b: {
                fontSize: 12,
                fontWeight: 600,
              },
            },
          },
        },
        series: [
          {
            // name: "饼图",
            type: "pie",
            center: ["30%", "50%"],
            radius: ["40%", "65%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: "40",
            //     fontWeight: "bold",
            //   },
            // },
            labelLine: {
              show: false,
            },
            data: this.echartsData.data,
          },
        ],
      };
      this.echarts1 = echarts.init(
        document.getElementById(this.echartsData.id)
      );
      this.echarts1.setOption(options, true);
      setTimeout(() => {
        this.echarts1.resize();
      }, 500);
    },
  },
};
</script>

<style scoped lang="scss">
// @keyframes turnX {
//   from {
//     -webkit-transform: rotate(0deg);
//   }
//   to {
//     -webkit-transform: rotate(360deg);
//   }
// }
.box {
  // animation: turnX 2s linear 0.2s infinite;
  // background-image: url(../../../assets/kmerit/homePage/pieBg1.png);
  background-repeat: no-repeat;
  background-size: 15%;
  background-position: 26.5%;
}
// 解决echarts resize不生效问题
::v-deep.box {
  width: 100%;
  height: 100%;
  min-height: 180px;
  // 子选择器(>) :只能选择作为某元素儿子元素的元素（直接子元素），不包括孙元素、曾孙元素等等等
  & > div:first-child {
    width: 100% !important;
    height: 100% !important;
    min-height: 180px;
    canvas {
      width: 100% !important;
      height: 100% !important;
      min-height: 180px;
    }
  }
}
</style>
